    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>保养工单</title>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">

        <!--标准mui.css-->
        <link rel="stylesheet" href="../../css/mui.min.css">
        <!--App自定义的css-->
        <link rel="stylesheet" type="text/css" href="../../css/app.css" />
        <link rel="stylesheet" type="text/css" href="../../css/mui.picker.min.css" />
        <link rel="stylesheet" href="../../css/iconfont.css" />
        <script src="../../../script/api.js"></script>
        <script src="../../js/jquery-1.11.3.js"></script>
        <script src="../../js/mui.min.js"></script>
        <script src="../../js/mui.picker.min.js"></script>
        <style>
            * { touch-action: none; }
            .mui-card .mui-control-content {
                padding: 10px;
            }

            /*自定义样式*/
            html,body{
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            a{
                color: #ffffff;
            }
            .mui-content{
                width: 100%;
                height: 100%;
                background: #ffffff;
            }
            .mui-bar{
                background:#4F77AA ;
                color: #ffffff;
                -webkit-box-shadow: 0 0 1px rgba(0,0,0,0);
                box-shadow: 0 0 1px rgba(0,0,0,0);
            }
            .mui-title{
                color: #ffffff;
            }
            .mui-content .mui-content-item{
                width:100%;
                height:calc(100% - 116px);
            }
            .mui-content .mui-content-item .mui-control-content{
                width: 100%;
                height:100%;
            }
            .bottom_submit{
                position: absolute;
                width: 100%;
                height: 48px;
                text-align: center;
                line-height: 48px;
                bottom: 0;
                background: #4F77AA;
            }
            input[type=submit]#submit{
                width:100%;
                height:48px;
                line-height: 48px;
                background:#4F77AA ;
                border:none;
                padding: 0;
            }

       .bottom_submit input[type=button]{
            width:50%;
            height:40px;
            line-height: 40px;
            background:#4F77AA ;
            border:none;
            padding: 0;
            float: left;
            color: #ffffff;
        }
        .bottom_submit input[type=button]#add{
              border-right:1px solid #dddddd;
              box-sizing:border-box;
        }
            .mui-input-row label~textarea{
                border:1px solid #c8c7cc;
                width: 60%;
                margin-right: 5%;
            }
            .mui-select-content{
                width:100%;
                height:41px;
                background: #EFEFF4;
            }
            .mui-select{
                width:80%;
                float:left;
            }
            .mui-select select{
                width:100%;
                background: #EFEFF4;
                border-radius: 0;
            }
            .mui-select-content .add_button{
                width: 20%;
                float: right;
                height: 41px;
                text-align: center;
                line-height: 41px;
            }
            .mui-select-content .add_button input{
                display: inline-block;
                width:100%;
                height:100%;
                background: #4f77aa;
                color:#ffffff;
            }
            .mui-control-content .add_detailed{
                width: 20%;
                float: right;
                height: 41px;
                text-align: center;
                line-height: 41px;
            }
            .mui-control-content .add_detailed input{
                display: inline-block;
                width:100%;
                height:100%;
                background: #4f77aa;
                color:#ffffff;
            }
            .mui-ellipsis-title{
                color:#4f77aa;
            }
            .mui-popup-title{
               text-align: left;
            }
            .mui-ellipsis span{
                font-size: 24px;
                padding-left: 25px;
                color:#f8ac59;
            }
            .mui-table-view-cell p{
                padding:5px 0;
            }
            .clear{
                clear: both;
            }
              .mui-content-item .line_x{
            width: 100%;
            height: 8px;
            background: #EFEFF4;
        }
        .mui-input-group:before{
            background: #ffffff;
        }

        /*添加备件样式*/
        .mui-popover {
                left: 50px;
                width: 320px;
                height: 500px;
            }
           .mui-popover .mui-content {
                padding: 10px;
            }
           .mui-popover .mui-input-row label{
                width: 35%;
                font-size: 14px;
            }
           .mui-popover .mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea{
                width: 65%;
                font-size: 14px;
            }
           .mui-popover .mui-input-group{
                background: rgba(255,255,255,0);
            }
           .mui-popover .mui-input-group input, .mui-input-group textarea{
                border:1px solid #dddddd;
            }
         
            .mui-popover .mui-control-content.mui-active{
                height: calc(100% - 84px);
                margin-top: 24px;
            }
            #sparepart .mui-segmented-control.mui-segmented-control-inverted .mui-control-item{
                width: 50%;
                float: left;
            }
            .addDelete{
                float: right;
                padding-right: 15px;
            }
            .addDelete span{
                margin: 0 5px;
            }
            .addDelete span.button{
                display:inline-block;
                width: 25px;
                height: 25px;
                line-height: 25px;
                text-align: center;
                background:#4f77aa ;
                color: #ffffff;
                font-size: 20px;
                border-radius: 50% 50%;
            }
            .mui-input-group .mui-input-row{
                height: auto;
                padding-bottom: 10px;
            }
        </style>
    </head>

    <body>
    <header class="mui-bar mui-bar-nav">
        <span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></span>
        <h1 class="mui-title">保养工单</h1>
    </header>
    <div class="mui-content">
        <div class="segmentedControl" style="padding: 10px 10px;">
            <div id="segmentedControl" class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary">
                <a class="mui-control-item mui-active" href="#item1">基础信息</a>
                <a class="mui-control-item" href="#item2">保养明细</a>
                <a class="mui-control-item" href="#item3">更换配件</a>
            </div>
        </div>
        <div class="mui-content-item">
            <div id="item1" class="mui-control-content mui-active">
                <div id="scroll" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <form class="mui-input-group">
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001">
                            </div>
                            <div class="mui-input-row">
                                <label>设备编码：</label>
                                <input type="text" value="CTY-04-002" disabled>
                            </div>
                            <div class="line_x" style=""></div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div id="item2" class="mui-control-content">
                <div id="scroll1" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <ul class="mui-table-view">
                            <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis mui-ellipsis-title' style="width:75%;float:left;">保养人：杨洋</p>
                                    <div class="add_detailed"><input type="button" value="添加" id="add_detailed"></div>
                                    <div class="clear"></div>
                                    <p class='mui-ellipsis'>开始时间：2015-10-10 10:10</p>
                                    <p class='mui-ellipsis'>结束时间：2015-10-10 10:10</p>
                                    <p class=''>工作描述：意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器...</p>
                                </div>
                            </li>
                            <li class="mui-table-view-cell mui-media">
                                <div class="mui-media-body">
                                    <p class='mui-ellipsis mui-ellipsis-title'>保养人：杨洋</p>
                                    <p class='mui-ellipsis'>开始时间：2015-10-10 10:10</p>
                                    <p class='mui-ellipsis'>结束时间：2015-10-10 10:10</p>
                                    <p class=''>工作描述：意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器意美吉双头锯-继电器...</p>
                                </div>
                            </li>

                        </ul>

                    </div>
                </div>
            </div>
            <div id="item3" class="mui-control-content">
                <div id="scroll2" class="mui-scroll-wrapper">
                    <div class="mui-scroll">
                        <div class="mui-select-content">
                            <div class="mui-select">
                                <select class="mui-h5 add_sparepart" style="margin:auto; color:#000;">
                                    <option value="">--请选择备件仓库--</option>
                                    <option value="1">成都仓库</option>
                                    <option value="1">维修件库</option>
                                </select>
                            </div>

                            <div class="add_button"><input type="button" id="add_sparepart" value="添加" /></div>
                        </div>

                        <form class="mui-input-group">
                            <!-- <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>设备编码：</label>
                                <input type="text" value="CTY-04-002" disabled>
                            </div>
                            <div class="line_x" style=""></div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="mui-input-row">
                                <label>保养单号：</label>
                                <input type="text" value="BY-20190827001" disabled>
                            </div>
                            <div class="" style="height:40px;padding: 10px 15px;">
                                <label>故障描述：</label>
                                <textarea class="textarea" id="repairContent1" rows="5" placeholder="故障描述"></textarea>
                            </div> -->
                        </form>
                        <iframe name="MyFrame" id="MyFrame" frameborder="0" style="display:none;width:100%;height:100%;position:absolute;top:0px;"></iframe>

                    </div>
                </div>


            </div>

        </div>
        <!-- 添加备件按钮 -->
        <div class="bottom_submit addSparepart_submit" style="display:none;">
            <input type="button" value="添加" id="add" onclick="add()">
            <input type="button" value="取消" id="cancel" onclick="cancel()">
        </div>
        <div class="bottom_submit">
            <input type="submit" value="提交" id="submit" onclick="submit()">
        </div>
    </div>
    

    <script>

        mui('body').on('tap','a',function(){
            window.top.location.href=this.href;
        });
        mui.init({
            swipeBack: true //启用右滑关闭功能
        });
        (function($) {
            $('#scroll').scroll({
                indicators: true //是否显示滚动条
            });
            $('#scroll0').scroll({
                indicators: true //是否显示滚动条
            });
            $('#scroll1').scroll({
                indicators: true //是否显示滚动条
            });
            $('#scroll2').scroll({
                indicators: true //是否显示滚动条
            });
            $('#scroll3').scroll({
                indicators: true //是否显示滚动条
            });
            $('.mui-scroll-wrapper').scroll({
                indicators: true //是否显示滚动条
            });

        $.init();
        var start_time = $('#start_time')[0];
        var end_time=$("#end_time")[0];
        var btns = $('.btn');
        var  btns1=$(".btn1");
            btns.each(function(i, btn) {
                btn.addEventListener('tap', function() {
                    var _self = this;
                    if(_self.picker) {
                        _self.picker.show(function (rs) {
                            end_time.value=rs.text;
                            _self.picker.dispose();
                            _self.picker = null;
                        });
                    } else {
                        var optionsJson = this.getAttribute('data-options') || '{}';
                        var options = JSON.parse(optionsJson);
                        var id = this.getAttribute('id');
                        /*
                         * 首次显示时实例化组件
                         * 示例为了简洁，将 options 放在了按钮的 dom 上
                         * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                         */
                        _self.picker = new $.DtPicker(options);
                        _self.picker.show(function(rs) {
                            /*
                             * rs.value 拼合后的 value
                             * rs.text 拼合后的 text
                             * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                             * rs.m 月，用法同年
                             * rs.d 日，用法同年
                             * rs.h 时，用法同年
                             * rs.i 分（minutes 的第二个字母），用法同年
                             */
                            start_time.value=rs.text;
                            // end_time.value=rs.text;
                            /*
                             * 返回 false 可以阻止选择框的关闭
                             * return false;
                             */
                            /*
                             * 释放组件资源，释放后将将不能再操作组件
                             * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                             * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                             * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                             */
                            _self.picker.dispose();
                            _self.picker = null;
                        });
                    }

                }, false);
            });
            btns1.each(function(i, btn1) {
                btn1.addEventListener('tap', function() {
                    var _self = this;
                    if(_self.picker) {
                        _self.picker.show(function (rs) {
                            end_time.value=rs.text;
                            _self.picker.dispose();
                            _self.picker = null;
                        });
                    } else {
                        var optionsJson = this.getAttribute('data-options') || '{}';
                        var options = JSON.parse(optionsJson);
                        var id = this.getAttribute('id');
                        /*
                         * 首次显示时实例化组件
                         * 示例为了简洁，将 options 放在了按钮的 dom 上
                         * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
                         */
                        _self.picker = new $.DtPicker(options);
                        _self.picker.show(function(rs) {
                            /*
                             * rs.value 拼合后的 value
                             * rs.text 拼合后的 text
                             * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
                             * rs.m 月，用法同年
                             * rs.d 日，用法同年
                             * rs.h 时，用法同年
                             * rs.i 分（minutes 的第二个字母），用法同年
                             */
                            end_time.value=rs.text;
                            /*
                             * 返回 false 可以阻止选择框的关闭
                             * return false;
                             * return false;
                             */
                            /*
                             * 释放组件资源，释放后将将不能再操作组件
                             * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
                             * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
                             * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
                             */
                            _self.picker.dispose();
                            _self.picker = null;
                        });
                    }

                }, false);
            });
        })(mui);
    //添加备件
        var src=1;
        $(document).on("click","input#add_sparepart",function(){
            var option=$("select.add_sparepart option:selected").html();
           if(option=='--请选择备件仓库--'){
                   mui.alert('请选择备件仓库', '', function() {
                       // info.innerText = '你刚关闭了警告框';
                   });
           }else{

            $("#MyFrame").css("display","block");
            $("#item3 .mui-scroll").css("height","100%");
            $("#MyFrame").attr("src","add_sparepart.html?src="+src);
            // $(".segmentedControl").css("display","none");
            $(".bottom_submit").css("display","none");
            $(".addSparepart_submit").css("display","block");
           }

        })
        //添加明细
        $(document).on("click","input#add_detailed",function(){
            window.location.href="add_detailed.html";
        })
        $(document).on("click","span.mui-pull-left",function(){
            window.location.href="maintenance_plan.html";
        })

       
        $(function(){
            var ret=window.location.href.split("?")[1];
            if(ret.length>0){
                ret=JSON.stringify(ret).replace(/%22/g,"\"");
                ret=ret.substring(ret.indexOf("=")+1,ret.length-1);
                if('submit' == ret){
                    $("#segmentedControl a").eq(2).addClass("mui-active");
                    $("#segmentedControl a").eq(0).removeClass("mui-active");
                    $(".mui-content-item .mui-control-content").eq(2).addClass("mui-active");
                    $(".mui-content-item .mui-control-content").eq(0).removeClass("mui-active");
                }
                if("save"== ret){
                    $("#segmentedControl a").eq(1).addClass("mui-active");
                    $("#segmentedControl a").eq(0).removeClass("mui-active");
                    $(".mui-content-item .mui-control-content").eq(1).addClass("mui-active");
                    $(".mui-content-item .mui-control-content").eq(0).removeClass("mui-active");
                }
            }

    })
    // 添加备件
     var arr=[];
    function add(){
            var data={};
            var length=$('#MyFrame').contents().find('.mui-content-item ul li.active').length;
            for(var i=0;i<length;i++){
                data.code=$('#MyFrame').contents().find('.mui-content-item ul li.active .code').eq(i).html();
                data.sum=$('#MyFrame').contents().find('.mui-content-item ul li.active .number .infoSum').eq(i).html();
                if(data.sum!=="0"){
                   if( $.inArray(data.code, arr)==-1){
                       arr.push(data.code);
                       $("#MyFrame").css("display","none");
                       $("#item3 .mui-scroll").css("height","auto");
                       $(".bottom_submit").css("display","block");
                       $("#item3 form").append(' <div class="mui-input-row"><label>单号：</label><input class="mui-ellipsis" type="text" value="'+data.code+'" disabled><div class="addDelete"><span style="color:#4f77aa;">数量：</span><span class="button add1" onclick="add1(this)">+</span><span class="parepartNum">'+data.sum+'</span><span onclick="delete1(this)" class="button delete1">-</span></div></div>');
                   }else{
                       alert("我存在了");
                       $("#MyFrame").css("display","none");
                       $(".bottom_submit").css("display","block");
                   }
                }else{
                    alert("添加失败!");
                }
            }
            // data.name=$('#MyFrame').contents().find('#item11 .name').eq(i).html();
            // data.type=$('#MyFrame').contents().find('#item11 .type').eq(i).html();
            // data.parepart=$('#MyFrame').contents().find('#item11 .parepart').eq(i).html();
            // data.parepart=$('#MyFrame').contents().find('#item11 .number .infoSum').eq(i).html();

            $(".mui-content-item li").removeClass("active");
    }
    // 取消备件添加
    function cancel(){
         $("#MyFrame").css("display","none");
        $("#item3 .mui-scroll").css("height","auto");
        $("#segmentedControl").css("display","block");
        $(".bottom_submit").css("display","block");

    }
    //加1减1
        function add1(item){
            var parepartNum=$(item).parent(".addDelete").find(".parepartNum").html();
            var currentparepartNum=Number(parepartNum)+1;
            $(item).parent(".addDelete").find(".parepartNum").html(currentparepartNum);
        }
        function delete1(item){
            var parepartNum=$(item).parent(".addDelete").find(".parepartNum").html();
            var currentparepartNum=Number(parepartNum)-1;
            if(currentparepartNum==0){
                $(item).parent(".addDelete").parent().remove();
               var delVal=$(item).parent(".addDelete").parent().find("input").val();
               for(var i=0;i<arr.length;i++){
                   if(arr[i]==delVal){
                       arr.splice(i,1);
                   }
               }
                return;
            }
            $(item).parent(".addDelete").find(".parepartNum").html(currentparepartNum);
        }
    </script>

    </body>

    </html>
